<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>账单</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			body{
				margin-left: 50px;
				margin-top: 50px;
				width: 80%;
				background-color: lightblue;
			}
			table{
				margin-top: 30px;
			}
			label{
				margin-top: 30px;
				margin-right: 20px;
			}
		</style>
		<script src="js/axios.min.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		<h1>账单管理</h1>
		<label>
			分类:<select v-model="selectId">
				<option v-for="classify in classifyList" v-bind:value="classify.classifyId">
				 {{classify.classifyName}}
				</option>
			</select>
		</label>
		<label>
			商品名称：<input v-model="goodsName" />
		</label>
		<label>
			时间：<input v-model="time" />
			至<input v-model="time" />
		</label>
		<button class="btn btn-primary"
		onclick="doSubmit()">筛选</button>
		<table class="table table-striped">
			<tr>
				<td>账单号</td>
				<td>商品名称</td>
				<td>售卖数量</td>
				<td>金额</td>
				<td>时间</td>
			</tr>
			<tr v-for="bill in billsList">
				<td>{{bill.billId}}</td>
				<td>{{bill.goodsName}}</td>
				<td>{{bill.quantity}}</td>
				<td>{{bill.amount}}</td>
				<td>{{bill.createdTime}}</td>
			</tr>
		</table>
		</div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{
				selectId:null,
				billsList:[],
				classifyList:[],
				goodsName:"",
				time:""
			},
			methods:{
				findAll:function(){
					let serverUrl="http://localhost:8088/bill/";
					let vue=this;
					axios.get(serverUrl)
					.then(function(response){
						vue.billsList=response.data.data.list;
						console.log(response.data)	
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				findClassify:function(){
					let serverUrl="http://localhost:8088/classify/"
					let vue=this;
					axios.get(serverUrl)
					.then(function(response){
						vue.classifyList=response.data.data;
						console.log(response.data)
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				}
			
			},
			mounted:function(){
					this.findClassify();
					this.findAll();
				}
			}
		var vue =new Vue(config);
	</script>
</html>
